<!--渠道结佣报表-->
<template>
  <div ref="outBox">
    <el-form size="small" :inline="true" :model="ruleForm" ref="ruleForm">
      <el-form-item label="区域-省-市：">
        <el-select @change="regionChange" v-model="ruleForm.regionId" placeholder="请选择区域">
          <el-option v-for="item in region" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-select @change="provinceChange" v-model="ruleForm.provinceid" placeholder="请选择省份">
          <el-option
            v-for="item in provinceList"
            :key="item.id"
            :label="item.province"
            :value="item.provinceid"
          ></el-option>
        </el-select>
        <el-select v-model="ruleForm.cityId" placeholder="请选择市区">
          <el-option
            v-for="item in cityList"
            :key="item.cityId"
            :label="item.city"
            :value="item.cityId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="楼盘：">
        <el-select filterable v-model="ruleForm.devId" placeholder="请选择楼盘">
          <el-option
            v-for="item in devList"
            :key="item.id"
            :label="item.devName"
            :value="item.devId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="结佣流程名称：">
        <el-input v-model.trim="ruleForm.payNote" placeholder="请输入结佣流程名称"></el-input>
      </el-form-item>
      <el-form-item label="经纪公司名称：">
        <el-input v-model.trim="ruleForm.companyName" placeholder="请输入经纪公司名称"></el-input>
      </el-form-item>
      <el-form-item label="付款法人单位：">
        <el-input v-model.trim="ruleForm.payerCompany" placeholder="请输入付款法人单位"></el-input>
      </el-form-item>
      <el-form-item label="是否推送EAS：">
        <el-select v-model="ruleForm.pushStatus" placeholder="请选择">
          <el-option label="是" :value="1"></el-option>
          <el-option label="否" :value="-1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否打款：">
        <el-select v-model="ruleForm.payStatus" placeholder="请选择">
          <el-option label="否" :value="-1"></el-option>
          <el-option label="是" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="结算审核批次号：">
        <el-input v-model.trim="ruleForm.applyCode" placeholder="请输入结算审核批次号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch" id="monitorEnter">查询</el-button>
        <el-button @click="onClear">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 数据表格 -->
    <el-table :data="tableData" :max-height="tableHeight" border>
      <template v-for="colConfig in colConfigs">
        <el-table-column
          align="center"
          v-if="colConfig.children"
          :label="colConfig.label"
          :key="colConfig.id"
        >
          <template v-for="child in colConfig.children">
            <el-table-column
              show-overflow-tooltip
              align="center"
              width="150"
              v-if="child.isShow"
              v-bind="child"
              :key="child.id"
            >
              <template slot-scope="scope">
                <span
                  style="color:#409EFF;cursor:pointer"
                  v-if="child.isShow == 'opt'"
                  @click="handleTransaction(scope.row.batchCodes)"
                >{{scope.row.batchCodes}}</span>
                <span
                  @click="applyHandle(scope.row.applyCode)"
                  style="color:#409EFF;cursor:pointer"
                  v-else-if="child.isShow == 'opts'"
                >{{scope.row.applyCode}}</span>
                <span
                  style="color:#409EFF;cursor:pointer"
                  @click="payOrder(scope.row.kingdeeCode)"
                  v-else
                >{{scope.row.kingdeeCode}}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-else
              show-overflow-tooltip
              align="center"
              width="150"
              v-bind="child"
              :key="child.id"
            ></el-table-column>
          </template>
        </el-table-column>
        <el-table-column align="center" v-else v-bind="colConfig" :key="colConfig.id"></el-table-column>
      </template>
      <el-table-column width="150" align="center" fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="seeFile(scope.row)">查看附件</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      style="margin-top:15px;"
      layout="total, sizes, prev, pager, next"
      :current-page="ruleForm.pageNum"
      :page-sizes="[10, 30, 50, 100]"
      :page-size="ruleForm.pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="total"
    ></el-pagination>
    <!--附件信息-->
    <el-dialog title="附件信息" :visible.sync="dialogTableVisible">
      <el-table :data="fileList">
        <el-table-column property="name" label="文件名"></el-table-column>
        <el-table-column property="uploadName" label="创建人"></el-table-column>
        <el-table-column property="uploadTime" :formatter="uploadTimes" label="上传时间"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import api from "@/api/apiPath";
import utils from "@/common/utils";
export default {
  name: "channelCommissionStatement",
  data() {
    return {
      ruleForm: {
        regionId: '',
        provinceid: '',
        cityId: undefined,
        devId: "",
        payNote: "",
        companyName: "",
        payerCompany: "",
        payStatus: "",
        pushStatus: "",
        applyCode: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      devList: [],
      tableData: [],
      fileList: [],
      region: [],
      provinceList: [],
      cityList: [],
      colConfigs: [
        { type: "index", label: "序号" },
        { label: "地区", prop: "regionName" },
        { label: "省份", prop: "province" },
        { label: "城市", prop: "city" },
        { label: "楼盘名称", prop: "devName",width:'180px' },
        { label: "结佣流程名称", prop: "payNote",width:'200px'},
        { label: "经纪公司名称", prop: "companyName",width:'180px'},
        { label: "订单数", prop: "brokerOrderNum" },
        { label: "客户数（人）", prop: "customerNum" },
        {
          label: "经纪公司申请结佣金额（含税）",
          formatter: this.formatterCompanyMoney
        },
        { label: "付款法人单位", prop: "payerCompany",width:'150px' },
        {
          label: "交易及佣金",
          children: [
            { label: "提交人", prop: "submitNames" },
            { label: "提交时间", prop: "submitTimes" },
            { label: "审核人", prop: "auditNames" },
            { label: "审核时间", prop: "auditTimes" },
            { label: "批次号", isShow: "opt" }
          ]
        },
        {
          label: "结佣审核",
          children: [
            { label: "申请结佣时间", formatter:this.applyTime},
            { label: "批次号", isShow: "opts" }
          ]
        },
        {
          label: "待支付清单",
          children: [
            { label: "待支付清单生成时间", formatter:this.kingdeeTime},
            { label: "待支付清单编号", isShow: "opd" }
          ]
        },
        { label: "是否推送EAS", formatter:this.pushStatus },
        { label: "是否打款", formatter: this.payStatus  }
      ],
      dialogTableVisible: false,
      tableHeight: 0
    };
  },
  created() {
    
    this.$axios.post(api.queryAllDevList, {}).then(res => {
      this.devList = res;
    });
    this.$axios.get(api.CITYREGIONALL).then(res => {
      this.region = res;
    });
    this.list();
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = this.$refs.outBox.scrollHeight + 420;
    });
  },
  methods: {
    kingdeeTime(row) {
      return utils.getTimeString(row.kingdeeTime);
    },
    // 申请结佣时间
    applyTime(row) {
      return utils.getTimeString(row.applyTime);
    },
    uploadTimes(row) {
      return utils.getTimeString(row.uploadTime);
    },
    payStatus(row, column, cellValue) {
      if (row.payStatus == 3) {
        return "是";
      } else {
        return "否";
      }
    },
    pushStatus(row, column, cellValue) {
      if (row.pushStatus == 1) {
        return "是";
      } else {
        return "否";
      }
    },
    regionChange(val) {
      this.ruleForm.provinceid = "";
      this.ruleForm.cityId = undefined;
      this.$axios.post(api.provincesRegionId, { regionId: val }).then(res => {
        this.provinceList = res;
      });
    },
    provinceChange(val) {
      this.ruleForm.cityId = undefined;
      this.cityList = [];
      if (val < 10000000) {
        this.$axios.get(api.CITYLISTPROVINECEID + val).then(res => {
          this.cityList = res.cityList;
        });
      }
    },
    handleSizeChange(val) {
      this.ruleForm.pageSize = val;
      this.list();
    },
    handleCurrentChange(val) {
      this.ruleForm.pageNum = val;
      this.list();
    },
    list() {
      this.$axios
        .post(api.searchChannelCommissionReportList, this.ruleForm)
        .then(res => {
          this.tableData = res.list;
          this.total = res.total;
        });
    },
    formatterCompanyMoney(row, column, cellValue) {
      return utils.formatMoney(row.brokerAmount);
    },
    seeFile({applyId,kingdeeCode}) {
      this.$axios.post(api.searchChannelCommissionFileList,{applyId,kingdeeCode}).then(res => {
        this.dialogTableVisible = true;
        this.fileList = res;
      })
      
    },
    handleTransaction(batchCodes) {
      this.$router.push({
        name: 'transactionAndCommission',
        params: {batchCodeList:batchCodes}
      })
    },
    applyHandle(applyCode) {
      this.$router.push({
        name: "brokerCompany",
        params: { code: applyCode }
      });
    },
    payOrder(kingdeeCode) {
      this.$router.push({
        name: "tobepaidlist",
        params: { code: kingdeeCode }
      });
    },
    onSearch() {
      if(this.ruleForm.regionId && this.ruleForm.provinceid && this.ruleForm.cityId === undefined) {
        return this.$message({
          type: 'warning',
          message: '请选择城市'
        });
      }
      this.ruleForm.pageNum = 1;
      this.list()
    },
    onClear() {
      this.provinceList = [];
      this.ruleForm = {
        cityId: undefined,
        devId: "",
        payNote: "",
        companyName: "",
        payerCompany: "",
        payStatus: "",
        pushStatus: "",
        applyCode: '',
        pageNum: 1,
        pageSize: 10
      };
      this.list();
    }
  }
};
</script>

<style scoped>
</style>